<template>
	<view :class="{'coupon': true, 'passed': invalid}" @click="handler('select')">
		<view class="number">
			<block v-if="info.coupon_type !== 2">
				<view class="price">
					<text class="icon">¥</text>
					<text>{{parseInt(info.coupon_denomination)}}</text>
				</view>
				<view class="remark">满{{parseInt(info.threshold)}}元使用</view>
			</block>
			<block v-else>
				<view class="price">
					<text>{{!invalid ? info.wait_coupon_num : info.use_coupon_num}}</text>
					<text class="icon">{{info.coupon_company}}</text>
				</view>
			</block>
		</view>
		<view class="intro">
			<view>
				<view class="title">{{info.coupon_name}}</view>
				<view class="limit" v-if="info.coupon_tag">{{info.coupon_tag}}</view>
				<view class="time">{{validity}}</view>
			</view>
			<view class="btn" @click.stop="goPage" v-if="!invalid && !isSelect">立即使用</view>
			<view v-if="isSelect" :class="{'select': true, 'active': selected}"></view>
		</view>
	</view>
</template>

<script>
	import time from '@/utils/time.js'
	export default {
		data() {
			return {

			}
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			invalid: {
				type: Boolean,
				default: false
			},
			isSelect: {
				type: Boolean,
				default: false
			},
			selected: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			validity() {
				let str = ""
				let end = this.info.invalid_time
				let start = end - (this.info.coupon_validity * 60 * 60 * 24)
				str = `${time.formatTime(start, 'Y.M.D')}-${time.formatTime(end, 'Y.M.D')}`
				return str
			}
		},
		methods: {
			handler(event) {
				if (this.invalid) return
				this.$emit(event, this.info)
			},
			goPage() {
				if (this.info.is_qrcode === 1) {
					this.$emit('openCode', this.info)
				} else {
					let url = this.info.url
					if (url.indexOf('tabs') !== -1) {
						// 导航类跳转
						uni.switchTab({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	$passedColor: #666;

	.coupon {
		background-color: #FFF;
		border-radius: 10rpx;
		@extend .flex-btw;
		height: 170rpx;
		margin-top: 30rpx;

		.number {
			@extend .flex-center;
			flex-direction: column;
			border-right: 1px dashed #999999;
			padding: 0 30rpx;
			position: relative;
			height: 100%;
			width: 210rpx;

			&::before,
			&::after {
				content: "";
				width: 30rpx;
				height: 30rpx;
				background-color: #eeeff0;
				position: absolute;
				right: -15rpx;
				border-radius: 50%;
			}

			&::before {
				top: -15rpx;
			}

			&::after {
				bottom: -15rpx;
			}

			.price {
				font-size: 60rpx;
				color: #FC602B;

				.icon {
					font-size: 22rpx;
				}
			}

			.remark {
				font-size: 20rpx;
				color: #666666;
			}
		}

		.intro {
			@extend .flex-btw;
			flex: 1;
			padding: 30rpx;
			box-sizing: border-box;
			height: 100%;

			.title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.limit {
				font-size: 20rpx;
				border: 1px solid #FF3B30;
				color: #FF3B30;
				display: inline-block;
				padding: 0 5rpx;
			}

			.time {
				margin-top: 30rpx;
				font-size: 20rpx;
				color: #666666;
			}
		}

		.btn {
			padding: 14rpx 18rpx;
			background-color: #FF9500;
			border-radius: 60rpx;
			color: #FFF;
			font-size: 26rpx;
			white-space: nowrap;
		}

		&.passed {
			color: $passedColor !important;

			.price {
				color: $passedColor;
			}

			.btn {
				background-color: $passedColor;
			}

			.limit {
				color: $passedColor;
				border-color: $passedColor;
			}
		}

	}

	.select {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 2px solid #999999;
		position: relative;

		&.active {
			border-color: #FF9500;

			&:before {
				content: "";
				width: 31rpx;
				height: 31rpx;
				background-color: #FF9500;
				position: absolute;
				left: 7rpx;
				top: 7rpx;
				border-radius: 50%;
			}
		}
	}
</style>
